<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
    	    <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <link rel="shortcut icon" href="favicon.ico" >
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/style.css">
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <!-- slider -->
        <script src="js/jquery.glide.js"></script> <!-- slider -->
        <!-- Menu -> função pra deixar o menu ativo (não funcionou porque a faixa pra ficar do jeito certo tem que ter 
        position: absolute, o que faz com que o menu selecionado flutue) -->
        <script type="text/javascript">
        $(document).ready(function(){
            $("ul.menu li:first").addClass("active").show();
            $("ul.menu li ").click(function () {
                $("ul.menu li").removeClass("active")
                $(this).addClass("active")
                $(activeTab).fadeIn("slow");
                return false;
                                    });
         
        });
        </script>
        <!-- fancybox -->
        <script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.1.5"></script>
        <link rel="stylesheet" href="css/jquery.fancybox.css">
        <script type="text/javascript">
            $(document).ready(function() {
                $('.fancybox').fancybox();
            });
        </script>

        <!--[if lt IE 7]>
            <p class="browsehappy">Você está usando um browser <strong>ultrapassado</strong>. Por favor <a href="http://browsehappy.com/">atualize seu browser</a> para melhorar sua navegação.</p>
        <![endif]-->


        <!-- formulário Participe -->
        <script type="text/javascript" src="js/form-aba.js"></script><!--Referencia ao arquivo externo Javascript-->

        <!-- galeria interna -->
        <script type="text/javascript" src="js/jquery.mousewheel-3.0.6.pack.js"></script> <!-- mousewheel plugin(this is optional) -->
        <link rel="stylesheet" href="css/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" /><!-- fancyBox -->
        <script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.1.5"></script><!-- fancyBox -->
        <script type="text/javascript">
        $(document).ready(function() {
            $("#fancybox-manual-c").click(function() {
                    $.fancybox.open([
                        {
                            href : 'img/1_b.jpg',
                            title : 'Fonte: Nome do autor'
                        }, {
                            href : 'img/2_b.jpg',
                            title : 'Fonte: Nome do autor'
                        }, {
                            href : 'img/3_b.jpg',
                            title : 'Fonte: Nome do autor'
                        }
                    ], {
                        padding: 0,
                        helpers : {
                            title : {
                                type : 'over'
                            }
                        }
                    });
                });
            $('.fancybox').fancybox();
        });
        </script>
        
    </head>
    <body id="interna">
        <!--[if lt IE 7]>
            <p class="browsehappy">Você está usando um browser <strong>ultrapassado</strong>. Por favor <a href="http://browsehappy.com/">atualize seu browser</a> para melhorar sua navegação.</p>
        <![endif]-->

 <?php include 'header-topo.php';?> 
  <?php include 'menu.php';?>       

        <div class="container">
        	

 
            
            <div id="conteudo">

                <div>
                    <div class="caminhorato">
                        <p class="categoria-title">
                            <a href="#">A-Z</a> &#62; <a href=""> Animais </a> &#62; Arara Canindé
                        </p>
                    </div>
                    <hr>
                    <div id="galeria-interna">
                        <a id="fancybox-manual-c" href="javascript:;">
                            <span class="mais-fotos">mais</span>
                            <img src="http://placekitten.com/825/295">
                            <div class="retangulo-legenda-foto">
                                <p class="legenda-foto">Fonte da imagem: Mário Jorge Silva</p>
                            </div>
                        </a>
                    </div>

                    <div class="artigo clearfix">
                        <div class="clearfix">
                            <h1 class="artigo-title">Arara Canindé teste testeeee</h1>
                            <div class="compart">
                                <div class="compart-title">
                                    <p>compartilhe!</p>
                                </div>
                                <div class="artigo-compart">
                                    <a href="http://www.facebook.com/share.php?u=[URL]&title=[TITLE]" target="_blank" class="symbol-fb"><span>facebook</span></a>
                                    <a href="http://pinterest.com/pin/create/bookmarklet/?media=[MEDIA]&url=[URL]&is_video=false&description=[TITLE]" class="symbol-p"><span>pinterest</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="artigo-main">
                            <p>
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
                            </p>
                        </div>
                        <div class="artigo-xtra">
                            <p>
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
                            </p>
                        </div>
                    </div>
                </div>

                <div id="participe">
                    <h2 class="bloco-title">&#187; Participe</h2>
                    <hr>
                    <form id="frmParticipe">
                        <ul class="tabs">
                            <li><a href="#enviarfotos"><img src="img/enviar-fotos.png">Enviar Fotos</a></li>
                            <li><a href="#enviarinfos"><img src="img/enviar-infos.png">Enviar Informações</a></li>
                        </ul>
                        <div class="tab-container">
                            <div class="cont-tab" id="enviarfotos">
                            <div class="container-tab">
                                <legend>Enviar fotos</legend>
                                <table class="frm-color">
                                    <tbody>
                                        <input id="txtNome" type="text" autofocus="" required="" placeholder="Nome Completo">
                                        <input id="txtEmail" type="email" autofocus="" required="" placeholder="E-mail">
                                        <input id="txtTituloFoto" type="text" autofocus="" required="" placeholder="Título da Foto">
                                        <div class="select-estilo">
                                            <select id="sltCategoria">
                                                <option>Selecione uma Categoria</option>
                                                <option>Animais</option>
                                                <option>Bibliotecas</option>
                                                <option>Biodiversidade</option>
                                                <option>...</option>
                                            </select>
                                        </div>
                                        <div class="selec-imagem">
                                            <label id="lblImagem" for="files">Imagem</label>
                                            <input type="file" class="file-input" id="files" name="arquivo"/><br />
                                        </div>
                                        <textarea id="txaInformacoes" placeholder="Escreva aqui informações adicionais"></textarea>
                                        <input id="btnEnviar" type="submit" value="Enviar" />
                                    </tbody>
                                </table>
                            </div>
                            </div>
                            <div class="cont-tab" id="enviarinfos">
                            <div class="container-tab">
                                <legend>Enviar informações</legend>
                                <table class="frm-color">
                                    <tbody>
                                        <input id="txtNome" type="text" autofocus="" required="" placeholder="Nome Completo">
                                        <input id="txtEmail" type="email" autofocus="" required="" placeholder="E-mail">
                                        <input id="txtTituloArtigo" type="text" autofocus="" required="" placeholder="Título do Artigo" >
                                        <div class="select-estilo">
                                            <select id="sltCategoria">
                                                <option>Selecione uma Categoria</option>
                                                <option>Animais</option>
                                                <option>Bibliotecas</option>
                                                <option>Biodiversidade</option>
                                                <option>...</option>
                                            </select>
                                        </div>
                                        <textarea id="txaArtigo" placeholder="Digite aqui seu artigo ou notícia"></textarea>
                                        <input id="btnEnviar" type="submit" value="Enviar" />
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        </div>
                    </form>
                </div> <!-- fim do participe -->

 <?php include 'veja-tambem.php';?> 
                
            </div>
        </div>

        <div id="publicidade" class="container"></div>

        <footer>
        </footer>

        <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>-->
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
        <script>
            var glide = $('.slider').glide({
                    afterTransition: function() {
                        var currentSlide = this.currentSlide;
                        console.log(currentSlide);
                    }
                }).data('api_glide');

                $(window).on('keyup', function (key) {
                    if (key.keyCode === 13) {
                        glide.jump(3, console.log('Wooo!'));
                    };
                });

                $('.slider-arrow').on('click', function() {
                    console.log(glide.current());
                });
        </script>
    </body>
</html>
